<script setup>
import { ref } from "vue";
import Title from "@/components/title/index.vue";
import Card from "./component/card.vue";
import {useResumeStore} from "@/stores/resume";
const {resumeList,createResume,deleteResume} = useResumeStore()
import { templateMap } from "./templateMap";
import { useRouter } from "vue-router";
const router = useRouter();
const handleEdit = (e) => {
  console.log(e);
  router.push({
    path: "/resumeMaker"+(templateMap[e.templateId]?templateMap[e.templateId]:''),
    query: {
      resumeId: e.resumeId,
    },
  })
};
const handleDelete = (e) => {
  deleteResume(e)
};
console.log(resumeList)
</script>

<template>
  <Title title="我的简历">
    <template #right>
      <el-button type="primary" size="large" @click="createResume">+ 添加简历</el-button>
    </template>
  </Title>
  <div class="card-list">
    <el-row :gutter="20">
        <el-col
        :xl="4"
        :lg="6"
        :md="8"
        :sm="12"
        :xs="24"
      v-for="(item, index) in resumeList"
      :key="index"
      class="card-item"
      ><Card
      :index="index"
        :cardData="item.resumeInfo"
        :showFooter="item.resumeInfo.showFooter"
        :icon="item.resumeInfo.icon"
        @edit="handleEdit"
        @delete="handleDelete"
      ></Card
    ></el-col>
    </el-row>
  </div>
</template>

<style scoped>
.card-item{
  margin-top: 20px;
}
</style>
